<template>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    
</head>
<body>
    <Header id="top"></Header>

    <div class="widewrapper main">
        <div class="container">
            <div class="row">
                <div class="col-md-8 blog-main">
                    <!-- 第一排 -->
                    <div class="row" v-for="data in datas" :key="data.key">
                        <div class="col-md-12 col-sm-12">
                            <article class=" blog-teaser">
                                <header>
                                    <h3 ><RouterLink :to="'/article/'+data.id">{{ data.title }}</RouterLink></h3>
                                    <span class="meta">{{ data.info }}</span>
                                    <hr>
                                </header>
                            
                            </article>
                        </div>
                    </div>


                    <div class="paging">
                        <a href="#top" class="older" @click="downPage">上页</a>
                        <p>当前页数：{{ page }}</p>
                        <a href="#top" class="older" @click="upPage">下页</a>
                    </div>
                </div>
                <Sider/>
            </div>
        </div>
    </div>

    <Footer/>
</body>
</html>
</template>

<script setup>
import {onMounted, ref, getCurrentInstance} from "vue"
import Header from "./Header.vue"
import Sider from "./Sider.vue"
import Footer from "./Footer.vue"

const page = ref(1)
const {proxy} = getCurrentInstance()
const datas = ref()

const getData = () =>{
    proxy.$http.get("/article?page=" + page.value).then(res =>{
        if (res.data.status != 200){
            page.value = 1
            getData()
        }
        datas.value = res.data.datas
    })
}

onMounted(()=>{
    getData()
})

const upPage = () =>{
    page.value += 1
    getData()
}
const downPage = () =>{
    if (page.value > 1){
        page.value -= 1
        getData()
    }
}
</script>